<template>
	<view class="bog" :style="{background:`url('${imgs.my.m14}')`}">
		<navbar title="邀请好友" color="#fff" bgColor="transparent" isZhanwei>
		</navbar>
		<div class="text">
			<!-- 已有3929283人使用道可到获得奖励 -->
		</div>
		<div class="thank-box"> 
			<!-- <div>邀请更多</div>
			<div>奖励更多</div> -->
		</div>
		<div class="set-box" :style="{background:`url('${imgs.my.m16}')`}">
			<div class="top">
				<!-- <div @click="$navTo('pageA/friend-list/friend-list')">好友人数 ： <text>214人</text></div> | -->
				<div @click="$navTo('pages/dealer/team')">好友人数 ： <text>{{teamTotal}}人</text></div> |
				<div @click="$navTo('pages/dealer/withdraw/apply')">平台奖励 ： <text>￥{{dealer?.money||0}}</text></div>
			</div>
			<div class="bottom">
				{{list[currentIndex]}}
				<!-- <u-notice-bar mode="horizontal" :list="list"></u-notice-bar> -->
			</div> 
		</div>
		<div class="btn" @click="$navTo('pages/dealer/poster')">立即邀请</div>
		<div class="txt">
			<div class="i">邀请一位好友使用名购岛</div>
			<div class="i">好友获得奖励的同时，该账号还额外获得平台奖励</div>
		</div>
		<div class="rule">
			<div class="tit">活动规则</div>
			<text>
				{{rule}}
				<!-- 邀请规则此处展示邀请规则内容，此处展示邀邀请规则此处展示邀请规则内容，此处展示邀邀请规则此处展示邀请规则内容，此处展示邀邀请规则此处展示邀请规则内容，此处展示邀 -->
			</text>
		</div>
 
<!-- 		<u-popup v-model="show" bgColor="#fff" height="300" @close="show=false" round="14rpx" mode="bottom">
			<view style="height: 300rpx;padding: 10rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;" >
				<div class="share-item" @click="$navTo('pages/dealer/poster')">
					<text class="item-top iconfont icon-erweima" style="color:#5fa5ff;"></text>
					<text>二维码邀请</text>
				</div>
				<div class="share-item"   @click="wxShare()">
					<text  style="color:#44DB74;" class="item-top  iconfont icon-weixin"></text>
					<text>微信好友</text>
				</div>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import navbar from '@/components/w-navbar/index.vue'
	import * as Api from '@/api/dealer'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				imgs,
				show: false,
				teamTotal: 0,
				currentIndex: 0,
				timer: null,
				dealer: undefined,
				list: [
					'135****8888邀请好友获得1.00元平台奖励',
					'137****5581邀请好友获得0.91元平台奖励',
					'181****2236邀请好友获得10.00元平台奖励',
					'191****6707邀请好友获得1.00元平台奖励',
					'135****9877邀请好友获得2.50元平台奖励',
				],
				rule: ''
			};
		},
		methods: {
			async getTimeNums() {
				const res = await Api.user()
				this.teamTotal = res.data.dealer.first_num
			},
			async getCenter() {
				const res = await Api.center()
				this.dealer = res.data.dealer
				this.rule = res.data.setting.words.withdraw_list.rules
			},
			invitePeopleEvent() {
				console.log(111111111);
				this.show = true
			},
			wxShare(){
				uni.share({
				  provider: 'weixin',
				  scene: 'WXSceneSession',
				  type: 0,
				  href: shareUrl,
				  title: app.shareTitle,
				  summary: '我发现了一个很不错的商品，赶快来看看吧！',
				  imageUrl: app.shareImageUrl,
				  success(res) { 
				    console.log("success:" + JSON.stringify(res));
				  },
				  fail(err) {
								console.log(err,'err======');
				    if (err.errCode === -8) {
				      app.$toast('很抱歉，您的手机没有安装微信~')
				    }
				  },
				  complete: () => app.handleCancel()
				})
			}
		},

		onLoad() {
			this.getCenter()
			this.getTimeNums()
			this.timer = setInterval(() => {
				this.currentIndex++
				if (this.currentIndex > this.list.length) {
					this.currentIndex = 0
				}
			}, 5000)
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
</script>

<style lang="scss">
	.bog {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		// justify-content: center;
		.text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFD80;
			margin-bottom: 26vh;
		}

		.thank-box {
			font-size: 48rpx;
			font-weight: bold;
			color: #FBE5CF;
		}

		.btn {
			width: 564rpx;
			height: 106rpx;
			margin-bottom: 20rpx;
			background-color: #FFCE88;
			border-radius: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #C23A0D;
			font-size: 36rpx;
			font-weight: bold;
			border: 4rpx solid #C23A0D;
			box-sizing: border-box;
			// background-repeat: no-repeat;
		}

		.txt {
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFD5B3;
			margin-bottom: 52rpx;
		}

		.rule {
			width: 684rpx;
			background: linear-gradient(#FFFBEF 0%, #FFFBEF 0%, #FFF6DA 100%);
			box-shadow: inset 0rpx -2rpx 12rpx 0rpx rgba(255, 12, 12, 0.5);
			border-radius: 12rpx;
			border: 2rpx solid #E9A560;
			padding: 36rpx 32rpx;
			box-sizing: border-box;

			.tit {
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #C23A0D;
				margin-bottom: 20rpx;
			}
		}

		.set-box {
			// width: 690rpx;
			height: 188rpx;
			margin-bottom: 42rpx;

			.top {
				height: 60%;
				padding-left: 166rpx;
				padding-right: 38rpx;
				// background-color: yellow;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 24rpx;
				margin-top: 14rpx;
				color: #9E7756;

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #9E7756;
				}
			}

			.bottom {
				height: 40%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #D19D72;
			}
		}
	}


	.share-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		.item-top{
			// width: 120rpx;
			// height: 120rpx;
			font-size: 106rpx;
			margin-bottom: 16rpx;
		}
	}
</style>